<template>
  <div>
    <!-- 头部栏 -->
    <div class="header">
      <!-- 文字、图片描述 -->
      <div class="desc">
        <div class="date">
          <i class="el-icon-date"></i>
          <div>{{ today }}</div>
        </div>

        <div class="text">
          <div class="part1">每日歌曲推荐</div>
          <div class="part2">根据你的音乐口味生成，每天6:00跟新</div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btn">
        <el-button
          class="caret-right"
          round
          size="medium"
          icon="el-icon-caret-right"
          type="danger"
          v-remove-focus
        >
          播放全部 <i class="el-icon-plus"></i>
        </el-button>
        <el-button round size="medium" icon="el-icon-folder-add" v-remove-focus
          >收藏全部</el-button
        >
      </div>
    </div>

    <!-- 歌单列表 -->
    <div class="songlist">
      <el-table
        :data="recommendSongsList"
        @row-dblclick="playSong"
        style="width: 100%"
        stripe
        highlight-current-row
        v-double-click
      >
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="name" label="音乐标题" width="360">
        </el-table-column>
        <el-table-column prop="artistname" label="歌手" width="150">
        </el-table-column>
        <el-table-column prop="album" label="专辑" width="320">
        </el-table-column>
        <el-table-column prop="time" label="时长">
          <template slot-scope="scope">
            {{ scope.row.time | songTimeFilter }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 每日推荐歌曲列表
      recommendSongsList: [],
      // 今日日期
      today: '',
    }
  },

  created() {
    this.getToday()
    this.getRecommendSongs()
    this.routerIsActiveInfo()
  },
  filters: {
    // 歌曲时间过滤器
    songTimeFilter: function (val) {
      const dt = new Date(val)
      // 分秒
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')

      return `${mm}:${ss}`
    },
  },
  methods: {
    ...mapMutations(['changeIsActive', 'changeMusicPlayInfo']),

    //  侧边栏信息
    routerIsActiveInfo() {
      const isActive = ''
      this.changeIsActive(isActive)
    },
    // 获取今天的日期
    getToday() {
      const td = new Date()
      this.today = td.getDate()
    },

    // 获取每日推荐歌曲
    async getRecommendSongs() {
      const { data: res } = await this.$http({
        url: `/recommend/songs`,
        withCredentials: true, //关键
      })
      // console.log(res)
      this.getRecommendSongsAboutInfo(res.data.dailySongs)
    },
    // 提取每日歌曲列表要用的相关信息的相关信息
    getRecommendSongsAboutInfo(list) {
      let tmepListDatas = []

      let index = 0
      list.map((item) => {
        let listObj = {}

        /**
         * 音乐id id
         * 音乐时长 time
         * 音乐名称 name
         * 音乐专辑名称 album
         * 音乐图片 picUrl
         * 音乐艺术家名称 artistname
         */
        listObj.id = item.id
        listObj.time = item.dt
        listObj.name = item.name
        listObj.album = item.al.name
        listObj.picUrl = item.al.picUrl

        let str = ''
        for (let i = 0; i < item.ar.length; i++) {
          str = str + item.ar[i].name
          if (i != item.ar.length - 1) {
            str = str + '/'
          }
        }
        listObj.artistname = str

        listObj.index = index
        index++
        return tmepListDatas.push(listObj)
      })

      this.recommendSongsList = tmepListDatas
      //   console.log(this.recentlyPlayInfo)
    },
    // 播放歌曲
    playSong(row) {
      let thePlaySongInfo = row
      let thePlaySongListInfo = this.recommendSongsList

      const info = {
        thePlaySongInfo,
        thePlaySongListInfo,
      }

      this.changeMusicPlayInfo(info)
    },
  },
}
</script>

<style lang="less" scoped>
.header {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 16px;
}
.desc {
  display: flex;
  > .date {
    border-radius: 6px;
    width: 80px;
    height: 80px;
    position: relative;
    border: 3px solid #ec4141;
    margin: 24px;
    > .el-icon-date {
      color: #ec4141;
      font-size: 36px;
      position: relative;
      left: 50%;
      top: 4px;
      transform: translate(-50%, 0);
    }
    > div {
      color: #ec4141;
      font-size: 36px;
      text-align: center;
    }
  }
  > .text {
    margin-top: 28px;
    > .part1 {
      padding-top: 12px;
      padding-bottom: 8px;
      font-size: 22px;
      font-weight: bold;
    }
    > .part2 {
      font-size: 14px;
      color: #676767;
    }
  }
}
.btn {
  margin-left: 28px;
  .caret-right {
    background-color: #ec4141;
  }
  /deep/ .el-button--medium.is-round {
    padding: 8px 14px;
  }
  /deep/ i {
    font-size: 20px;
  }
  /deep/ span {
    position: relative;
    top: -3px;
  }
  /deep/ .el-icon-plus {
    position: relative;
    top: 3px;
  }
}

.songlist {
  /deep/ .el-table_1_column_1 {
    padding-left: 20px;
  }
  /deep/ div.cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /deep/ .el-table__cell {
    cursor: pointer;
  }
  /deep/ .el-table::before {
    height: 0px;
  }
}
</style>